<template>
	<div>
		<div id="header">
			<span><a href=""></a><h3>{{MovieDetail.title}}</h3></span>
		</div>
		<div id="nav">
			<div id="main">
				<div id="main_left">
					<img :src="MovieDetail.images.medium" :alt="MovieDetail.alt">
				</div>
				<div id="main_right">
					<ul>
						<li><h3>{{MovieDetail.title}}</h3></li>
						<star :num="MovieDetail.rating.stars"></star>
						<li><p>{{MovieDetail.rating.average}}({{MovieDetail.collect_count}}人评分)</p></li>
						<li><p>{{MovieDetail.year}}年</p></li>
						<li><p>{{MovieDetail.genres.join(', ')}}</p></li>
						<li><p v-for="item in MovieDetail.countries">{{item}}</p></li>
						<li><p v-for="item in MovieDetail.durations" v-if="item.indexOf('中国')>0">{{item}}</p></li>
						<li><p v-for="item in MovieDetail.pubdates" v-if="item.indexOf('中国')>0">{{item}}</p></li>
					</ul>
				</div>
			</div>
			<div id="count">
				<div><p class='f_right'>{{MovieDetail.wish_count}}人想看</p></div>
				<div><p class='f_left'>{{MovieDetail.reviews_count}}人看过</p></div>
			</div>
			<div id="summary">
				{{MovieDetail.summary}}
			</div>
			<div class="message">
		        <div class="actor">
		          	<h3>演职人员</h3>
		            <div id="nav" class="MovieDetail">
  						<div class="item" v-for="movie in MovieDetail" v-on:click="actor(movie.id)">
				          	<div class="msg-scoll">
					            <div class="msg-star" v-for="item of MovieDetail.directors" @click="actor(item.id)">
					              <div v-if="item.avatars.small">
					                <img :src="item.avatars.small" :alt="item.alt">
					              </div>
					              <div class="msg-star-name">
					                {{item.name}}[导演]
					              </div>
					            </div>
					            <div v-for="item of MovieDetail.casts" @click="actor(item.id)">
						            <div v-if="item.avatars.small">
						                <img :src="item.avatars.small" :alt="item.alt">
						            </div>
					                <div class="msg-star-name">
					                	{{item.name}}
					                </div>
					            </div>
					        </div>
              			</div>
	              	</div>
		        </div>
		    </div>
		    <div class="discuss">
		    	<h3>热门短评</h3>
		        <div v-for="item in MovieDetail.popular_comments">
		          <div class="msg-rating">
		            <star :num="item.rating.value*10"></star>
		            <span>{{item.created_at}}</span>
		          </div>
		          <p class="author-content">{{item.content}}</p>
		          <div class="author-img">
		            <img :src="item.author.avatar" :alt="item.author.alt">
		            <span>{{item.author.name}}</span>
		          </div>
		        </div>
		        <p @click="smallComment(MovieDetail.id)" class="msg-all-Comment">查看全部短论</p>
		        <p @click="comment(MovieDetail.id)" class="msg-all-Comment">查看全部影评</p>
		    </div>
		</div>
	</div>
</template>
<script>
	import star from './star'
	export default{
		data(){
			return {
				MovieDetail:{
					title:''
				}
			}
		},
		components:{
		    star:star
	  	},
		mounted:function(){
			var id = this.$route.params.id
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/"+id+"?apikey=0b2bdeda43b5688921839c8ecb20399b").then(function(response){
        	this.MovieDetail = response.body;
      		})
		},
	filters: {
    limitLength: function (value) {
      return value
    },
    countStar:function(value){
    }
  },
	methods:{
    actor:function(id){
    	const path = '/actor/'+id
        this.loading=false
        this.$router.push({ name: 'actor', params: { id: id }})
    	},
    smallComment: function (id) {
        const path = '/smallComment/'+id
        this.$router.push({name: 'smallComment', params: { id: id },path: path})
      },
	comment: function (id) {
	    const path = '/comment/'+id
	    this.$router.push({name: 'comment', params: { id: id },path: path})
	  },
    backLastPage: function () {
        window.history.go(-1)
      }
  	}
}
</script>
<style scoped>
a{
  text-decoration: none;
}
li{
  list-style: none;
}
#header{
	height: 50px;
	background-color: #e54847;
}
#header span a{
	height: 13px;
	width: 13px;
	border:2px solid #fff;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
	position: absolute;
	top: 16px;
	left: 12px;
}
#header span h3{
	color: #fff;
	font-weight: normal;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
}
#main{
	background-color: #b4b1b1;
	padding: 15px;
	height: 180px;
}
#main_left{
	float: left;
}
#main_left img{
	border:1px solid #fff;
	width: 100px;
	height: 147px;
} 
#main_right{
	float: left;
	margin-left: 15px;
}
#main_right h3{
	font-size: 20px;
    color: #343232;
    font-weight: normal;
}
#main_right p{
	color: #6b6868;
	font-size: 12px;
	margin: 3px auto;
}
#count{
	clear: both;
	padding: 10px;
}
#count div{
	width: 50%;
	float: left;
}
#count p{
	margin-right: 20px;
	margin-left: 20px;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	width: 100px;
	height: 30px;
	color: #fff;
	border-radius: 5px;
	background-color: #e54847;
}
#count .f_right{
	float: right;
}
#count .f_left{
	float: left;
}
#summary{
	clear: both;
	font-size: 14px;
	color: #555;
	padding: 20px 10px; 
}
.actor{
    padding: 10px;
  }
.actor h3{
	color: #666;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
}
.msg-scoll {
    white-space: nowrap;
    overflow-x: scroll;
    margin-top: 10px;
}
.message{
    overflow: hidden;
    height: 165px;
    margin: 0 auto;
    overflow: hidden;
}
.msg-scoll > div {
    display: inline-block;
    margin-right: 5px;
}
.msg-star-name {
	font-size: 14px;
	color: #2c3e50;
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
.discuss{
	padding: 10px;
}
.discuss h3 {
    color: #666;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .author-content {
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .author-img {
    margin-bottom: 10px;
    border-bottom: 1px solid #d6d3d3;
  }
  .author-img:last-child {
    margin-bottom: 0;
  }
  .author-img img {
    border-radius: 50%;
  }
  .author-img span {
  	font-size: 12px;
    vertical-align: 80%;
    margin-left: 5px;
    color: #999;
  }
  .msg-all-Comment {
    color: #e54847;
    font-weight: lighter;
    text-align: center;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #d6d3d3;
  }
.msg-rating{
}
.msg-rating span{
    font-size: 12px;
    color: #333;
}
  .msg-rating:last-child {
    flex: 1;
  }
</style>